<template>
	<view class="content">
		<f-navbar title="商品评价" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="content_box">
			<view class="content_item" @click="onorderDetail">
				<view class="content_itemtop">
					<view class="content_itemtopL">
						<!-- <view class="content_itemtopLimg"></view> -->
						<image class="content_itemtopLimg" :src="imgurl+'shop_icon.png'" mode=""></image>
						<view class="content_itemtopLname">{{dataobj.store_name}}</view>
						<van-icon name="arrow" size="16" color="#bbb" />
					</view>
					<!-- <view class="content_itemtopR">待付款</view> -->
				</view>
				<view class="content_shopbox">

					<view class="content_shopimg">
						<image class="content_shopimg1" :src="dataobj.good_item_img" mode=""></image>
					</view>
					<view class="content_shopR">
						<view class="content_shopRtxt">
							<view class="content_shopRtxtL">
								{{dataobj.title}}</view>
							<view class="content_shopRtxtprice">￥{{dataobj.tree_price}}</view>
						</view>
						<view class="content_shopguige">
							<view class="content_shopguigeL">{{dataobj.spec_title}}</view>
							<view class="content_shopguigenum">*{{dataobj.buy_num}}</view>
						</view>
						<view class="content_heji">合计：<text class="priceicon">￥</text><text class="price">{{dataobj.total_amount}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="pingjiatxtbox">
				<!-- <view class="pingjiaicon"> -->
				<image class="pingjiaicon" :src="imgurl+'pingjiaicon.png'" mode=""></image>
				<!-- </view> -->
				<view class="pingjia_textarea">
					<textarea :value="evcluateValue" @input="onpinglun" placeholder-class="placeholderclass" maxlength="-1" auto-height
						placeholder="请填写您对该商品的真实评价与感受~~" />
				</view>
			</view>
			<view class="upload_image" v-show="isshowupload">
				<view class="upload_box" @click="onuploadimg">
					<!-- <view class="upload_icon"> -->
					<image class="upload_icon" :src="imgurl+'upload_img.png'" mode=""></image>
					<!-- </view> -->
					<view class="upload_txt">
						上传图片
					</view>
				</view>

			</view>
			<view class="uploadimg" v-show="!isshowupload">
				<view class="uploadimg_item" @click="onuploadimg">
					<!-- <view class="upload_icon"> -->
					<image class="upload_icon" :src="imgurl+'upload_img.png'" mode=""></image>
					<!-- </view> -->
					<view class="upload_txt">
						上传图片
					</view>
				</view>
				<view class="upload_photo" v-for="(imgitem,imgindex) in picArr" :key="imgindex">
					<image class="upload_close" @click="deleteimg(imgindex)" :src="imgurl+'closeicon.png'" mode=""></image>
					<image class="upload_photo1" :src="imgitem" mode=""></image>
				</view>
			</view>
			
			<view class="submitbox" @click="submit">提交</view>

		</view>
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {
		getGoodBySku,
		addComment
	} from '../../../utils/app.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				active: '1',
				navHeight: 0, //导航栏的高度
				isshowOrder: true,
				imgurl: getApp().globalData.imgurl,
				apiUrl: getApp().globalData.apiUrl,
				evcluateValue: '', // 评价内容
				isshowupload: true, //上传
				insert: {
					images: []
				},
				picArr: [], //图片数据
				order_sn:'', // 
				dataobj:{}, // 
			}
		},
		onLoad(options) {
			this.order_sn = options.order_sn
			this.getList()
		},
		methods: {
			getList(){
				getGoodBySku({
					api_token: uni.getStorageSync('token'),
					order_sn:this.order_sn,
				}).then(res => {
					console.log(res);
					this.dataobj = res.data
				})
			},
			// 提交评论
			submit(){
				addComment({
					order_sn:this.order_sn,
					contents: this.evcluateValue,
					com_imgs: JSON.stringify(this.picArr)
				}).then(res => {
					console.log(res);
				if(res.code==1){
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2]; //上一个页面
					console.log(prevPage);
					// prevPage.setData({
					//      userdata: {
					//        phonenum:this.phonenum
					//      }
					//    })
					prevPage.$vm.getList()
					uni.navigateBack({ //返回
						delta: 1
					})
				}
				})
			},
			//评论
			onpinglun(e){
				this.evcluateValue = e.detail.value
			},
			// 删除图片
			deleteimg(e) {
				let imgs = this.picArr
				imgs.splice(e, 1)
				this.picArr = imgs
				console.log(this.picArr);
			},
			// 上传售后图片
			onUploadimg() {
				let that = this
				if (that.picArr.length >= 6) {
					uni.showToast({
						title: `最多只能上传${that.picArr.length}张图片`,
						icon: 'none',
						mask: true,
						duration: 1500
					})
				} else {
					uni.chooseImage({
						count: 6,
						sourceType: ['camera', 'album'], //从相册选择
						success: chooseImageRes => {
							console.log('成功', chooseImageRes);
							const tempFilePaths = chooseImageRes.tempFilePaths;
							console.log(tempFilePaths);
							for (let i = 0; i < tempFilePaths.length; i++) {
								uni.uploadFile({
									url: this.apiUrl+'api/uploadFile', //仅为示例，非真实的接口地址
									filePath: tempFilePaths[i],
									name: 'file',
									formData: {
										file: tempFilePaths[i],
										type: '1'
									},
									success: res => {
										console.log(res);
										uni.hideLoading()
										// this.picArr.concat(JSON.parse(res.data).entity)
										let data1 = this.picArr.concat(JSON.parse(res.data).data
											.url)
										// let data1 = JSON.parse(res.data)
										console.log(data1);
										this.picArr = data1
										console.log(this.picArr);
										// if(data1.code==1){
										// 	setUserInfo({
										// 		fields:data1.data.url,
										// 		type:2
										// 	}).then(res1 => {
										// 		if(res1.code==1){
										// 			this.getList()
										// 		}
										// 	})
										// }
										// console.log('上传成功', JSON.parse(res.data));
										// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态

									}
								});
								uni.showLoading({
									title: '正在上传...'
								})

							}
							// this.avatarimg = tempFilePaths

						},
						// fail: err => {
						// 	this.myToast('图片上传失败', 'none');
						// }
					});
				}
			},

			// 上传图片
			onuploadimg() {
				this.isshowupload = false
				this.onUploadimg()
			},
		}
	}
</script>

<style>
	page {
		background: #eee;
	}

	.content_item {
		width: 690rpx;
		/* height: 413rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 22rpx;
		padding-bottom: 50rpx;
	}

	.content_itemtop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 41rpx;
	}

	.content_itemtopL {
		display: flex;
		align-items: center;
	}

	.content_itemtopLimg {
		width: 32rpx;
		height: 29rpx;
		/* background: #000; */
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.content_itemtopLname {
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		/* line-height: 55rpx; */
		margin-right: 20rpx;
	}

	.content_itemtopR {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		line-height: 2rpx;
		margin-right: 22rpx;
	}

	.kuaidi_info {
		width: 650rpx;
		height: 70rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 21rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	.kuaidi_img {
		width: 32rpx;
		height: 25rpx;
		background: #000;
		margin-left: 21rpx;
	}

	.kuaidi_title {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 20rpx;
	}

	.kuaidi_oddnum {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 22rpx;
	}

	.content_shopbox {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.content_shopimg {
		width: 180rpx;
		height: 180rpx;
		/* background: #FF0000; */
		border-radius: 10rpx;
	}
	.content_shopimg1{
		width: 100%;
		height: 100%;
	}

	.content_shopR {
		margin-left: 20rpx;
		width: 66%;
	}

	.content_shopRtxt {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content_shopRtxtL {
		width: 313rpx;
		height: 80rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 42rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.content_shopRtxtprice {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
	}

	.content_shopguige {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 29rpx;
	}

	.content_shopguigeL {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
	}

	.content_shopguigenum {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
	}

	.content_heji {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 29rpx;
		/* line-height: 40rpx; */
	}

	.priceicon {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FF0000;
		/* line-height: 40rpx; */
	}

	.price {
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FF0000;
		/* line-height: 40rpx; */
	}

	.content_bottombox {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 45rpx;
		/* margin-bottom: 50rpx; */
	}

	.content_bottomboxQX {
		width: 156rpx;
		height: 62rpx;
		border: 2rpx solid #bbb;
		box-sizing: border-box;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #bbb;
		line-height: 58rpx;
		text-align: center;
		margin-right: 20rpx;
	}

	.content_bottomboxSH {
		width: 156rpx;
		height: 62rpx;
		border: 2rpx solid #EF0E6C;
		box-sizing: border-box;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #EF0E6C;
		line-height: 58rpx;
		text-align: center;
		margin-right: 20rpx;
		margin-left: 18rpx;
	}

	.content_bottomboxbtn {
		width: 154rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-right: 23rpx;
		margin-left: 18rpx;
	}

	.content_pingjia {
		width: 156rpx;
		height: 62rpx;
		border: 2rpx solid #EF0E6C;
		box-sizing: border-box;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #EF0E6C;
		line-height: 58rpx;
		text-align: center;
		margin-right: 20rpx;
		margin-left: 18rpx;
	}

	.pingjiatxtbox {
		width: 690rpx;
		min-height: 343rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: flex-start;
	}

	.pingjiaicon {
		width: 38rpx;
		height: 38rpx;
		/* background: #000; */
	}

	.pingjia_textarea {
		width: 570rpx;
		/* height: 280rpx; */
		margin-left: 20rpx;
		/* background: #EF0E6C; */
	}

	.placeholderclass {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
	}

	.upload_image {
		width: 690rpx;
		height: 200rpx;
		/* background: #BBBBBB; */
		background: rgba(187, 187, 187, .22);
		/* opacity: 0.22; */
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		position: relative;

	}

	.upload_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

	}

	.upload_icon {
		width: 51rpx;
		height: 50rpx;
		/* background: #000; */
	}

	.upload_txt {
		font-size: 20rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 10rpx;
	}

	.uploadimg {
		margin-left: 30rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.uploadimg_item {
		width: 123rpx;
		height: 123rpx;
		background: #FFFFFF;
		border: 1px solid #BBBBBB;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.upload_photo {
		width: 123rpx;
		height: 123rpx;
		background: #FFFFFF;
		border: 1px solid #BBBBBB;
		border-radius: 10rpx;
		margin-left: 19rpx;
		margin-bottom: 20rpx;
		position: relative;
	}
	.upload_photo1{
		width: 100%;
		height: 100%;
	}

	.upload_photo:nth-child(6) {
		margin-left: 0;
	}

	.upload_close {
		width: 19rpx;
		height: 19rpx;
		/* background: #000; */
		position: absolute;
		left: 4rpx;
		top: 4rpx;
	}
	.submitbox{
		width: 254rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 62rpx;
	}
</style>